<template>

<div class="zuo">
  <el-row class="tac w" >
    <el-col :span="12">
      <h5 class="mb-2">仪表盘</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>常用设置</span>
          </template>
         
            <el-menu-item index="1-1">教师管理</el-menu-item>
            <el-menu-item index="1-2">学生管理</el-menu-item>
             <el-menu-item index="1-1">公告管理</el-menu-item>
            <el-menu-item index="1-2">系统配置</el-menu-item>
             <el-menu-item index="1-1">判断服务器</el-menu-item>
            
       
        
         
        </el-sub-menu>
        
      </el-menu>
       <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>问题</span>
          </template>
        
            <el-menu-item index="1-1">问题列表</el-menu-item>
            <el-menu-item index="1-2">增加题目</el-menu-item>
              <el-menu-item index="1-1">导入导出题目</el-menu-item>
            
         
         
         
        </el-sub-menu>
        
      </el-menu>
       <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>比赛&练习</span>
          </template>
         
            <el-menu-item index="1-1">比赛列表</el-menu-item>
            <el-menu-item index="1-2">创建比赛</el-menu-item>
         
         
         
        </el-sub-menu>
        
      </el-menu>
       <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>课程</span>
          </template>
         
            <el-menu-item index="1-1">课程列表</el-menu-item>
            <el-menu-item index="1-2">创建课程</el-menu-item>
        
        
         
        </el-sub-menu>
        
      </el-menu>
      
    </el-col>
   
  </el-row>
  
</div>
<div class="you">
  
  <h3>第一个使用布局的页面</h3>
  <p>这里是内容可以写组件也可以写html</p>
  <h4>Web前端实战课程开发所有</h4>
  <img src="src\assets\logo.png" alt="">
</div>
</template>



<script>
export default {
 
  props: {
    msg: String
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.zuo{
  width: 35%;
  
}
html{position: relative;}
.you{
  position: absolute;
  right: 0;
  top: 0;
 width: 1250px;
 height: 750px;
  background-color: #e9eef2;
}
h3{background-color: #b3c0d1;
padding: 10px;}

h4{
margin-top: 600px;
padding: 10px;
background-color: #b3c0d1;}
.el-col.el-col-12 {
  margin-top: 100px;
}
</style>